<template>
  <view :class="isIndex ? 'index' : ''">
    <view v-if="!isPreview" class="reportItemContainer" @click="topreview(reportItem)">
      <view class="left">
        <image :src="reportItem.bannerUrl" class="reportImg"></image>
      </view>
      <view class="right">
        <view class="reportTitle">{{ reportItem.activityName }}</view>
        <view class="reportDesc" v-if="reportItem.channelType == 20">{{ reportItem.activityIntroduce }}</view>
        <view class="reportDesc" v-if="reportItem.channelType != 20">{{ reportItem.activityDesc }}</view>
        <view class="reportTags" v-if="reportItem.channelType != 20">
          <text class="tags" style="opacity: 0"></text>
        </view>
        <view class="reportTags" v-if="reportItem.channelType == 20">
          <text class="tags" v-for="(v, index) in reportItem.activityTags.split(',')" :key="index">{{ v }}</text>
        </view>
        <view class="reportEntrance" v-if="reportItem.channelType == 20">永久有效</view>
        <view class="reportEntrance" style="color: #999999" v-else>过期时间：{{ reportItem.limitTime | expirationTime() }}
        </view>
      </view>
    </view>
    <view v-else class="reportItemContainer" @click="handleItemClick(reportItem)">
      <view class="left">
        <image :src="reportItem.bannerUrl" class="reportImg"></image>
      </view>
      <view class="right">
        <view class="reportTitle">{{ reportItem.activityName }}</view>
        <view class="reportDesc">{{ reportItem.activityIntroduce }}</view>
        <view class="reportTags">
          <text class="tags" v-for="(v, index) in reportItem.activityTags.split(',')" :key="index">{{ v }}</text>
        </view>
        <view v-if="reportItem.isBuy == 2" class="reportEntrance">免费预览
          <image
            src="//upload.yl1001.com/upload/images/view?file=e0/-6iFEh6ZQP,OZbSNYadLvec2WYRXjPUar377lefHtOo_t7-skOsN=2oxEf.png">
          </image>
        </view>
        <view v-else class="reportEntrance"> </view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqAppAddBrowseRecord } from "@/api/modules/report";
export default {
  name: "reportItem",
  props: {
    reportItem: {
      type: Object,
      required: true,
    },
    isPreview: {
      type: Boolean,
    },
    isPC: {
      type: Boolean,
    },
    isIndex: Boolean, // 顾问主页
  },
  data() {
    return {
      expirationTime: "",
      isCompany: uni.getStorageSync("login-status") == "company",
    };
  },
  components: {},
  filters: {
    expirationTime(val) {
      let time = new Date(val);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return `${year}.${month < 10 ? "0" + month : month}.${
        day < 10 ? "0" + day : day
      }`;
    },
  },

  mounted() {},
  computed: {
    personId() {
      return uni.getStorageSync("person-id").slice(2) || undefined;
    },
  },
  methods: {
    handleItemClick(item) {
      // const majorId = this.reportItem.majorId;
      if (this.isIndex) {
        if (!this.personId) {
          let fullPath =
            getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
          let returnUrl = encodeURIComponent(fullPath);
          uni.showModal({
            title: "提示",
            content: "该功能需要登录",
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url:
                    "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl,
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
      }
      let params = {
        mpaActivityId: item.mpaActivityId,
        activityName: this.reportItem.activityName,
        activityDesc: this.reportItem.activityDesc,
        browsePersonId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      reqAppAddBrowseRecord(params, this.personId);
      uni.navigateTo({
        url:
          "/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=" +
          item.mpaActivityId,
      });
    },
    topreview(data) {
      if (this.isPC) {
        uni.showToast({
          title: "报告预览暂不支持PC端设备，请前往移动端预览",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      //打开pdf文件
      uni.showLoading({
        title: "加载中...",
      });
      // let file = decodeURIComponent(data.fileUrl); // 解码(注意:涉及到文件名中有中文需要转码)
      // file = this.getFilePathName(file); // 将文件路径过滤，格式为【文件名+.后缀名】
      // 预览网络文档
      // console.log(file)
      wx.downloadFile({
        url: data.fileUrl, // 文件的本身url
        filePath: wx.env.USER_DATA_PATH + "/" + data.activityName + ".pdf", // 本地自定义的文件名
        success: function (res) {
          let filePath = res.filePath;
          wx.openDocument({
            filePath: filePath,
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            },
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.showLoading({
            title: res,
          });
        },
      });
    },
    getFilePathName(path) {
      let pos1 = path.lastIndexOf("/");
      let pos2 = path.lastIndexOf("\\");
      let position = Math.max(pos1, pos2);
      if (position < 0) return path;
      else return path.substring(position + 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.reportItemContainer {
  display: flex;
  width: 690rpx;
  padding: 18rpx 32rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  // margin-bottom: 16rpx;
  border-radius: 30rpx;
  .left {
    .reportImg {
      width: 154rpx;
      height: 168rpx;
      border-radius: 20rpx;
      margin-right: 28rpx;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .reportTitle {
      width: 440rpx;
      height: 44rpx;
      font-size: 30rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: bold;
      color: #222222;
      line-height: 44rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      // text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    }
    .reportDesc {
      width: 440rpx;
      display: flex;
      height: 36rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .reportTags {
      .tags {
        height: 32rpx;
        background: #f5f5f5;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 20rpx;
        margin-right: 16rpx;
        padding: 6rpx 12rpx;
      }
    }
    .reportEntrance {
      position: relative;
      display: flex;
      height: 36rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #ff9159;
      ::v-deep .uni-icons {
        color: #ff9159 !important;
        font-size: 20rpx !important;
        padding-top: 4rpx;
        margin-left: 8rpx;
      }
      image {
        position: absolute;
        width: 22rpx;
        height: 26rpx;
        top: 18%;
        left: 108rpx;
      }
    }
  }
}
.index {
  .reportItemContainer {
    margin: 0;
    width: auto;
    .right {
      .reportTitle {
        width: auto;
      }
      .reportDesc {
        width: auto;
      }
    }
  }
}
</style>
